<template>
  <div class="peer-detail">
    <!-- 待好友支付 -->
    <div class="peer-detail-top">
      <img v-if="peerPayInfo.length > 0" :src="peerPayInfo[0].author" alt="">
      
      <a v-if="peerPayInfo[0] && peerPayInfo[0].status > 0">
        <span v-if="pay_money > 0"> 您成功帮我付款{{ pay_money }}</span>
        <span v-else>交易成功</span>
      </a>
      <a v-else>
        <span>待好友支付</span>
      </a>
    </div>
    <!-- 待付订单 -->
    <div class="peer-detail-money" v-if="peerPayInfo[0] && peerPayInfo[0].status <= 0">
      <div class="peer-msg-top">
        <img src="https://img.wifenxiao.com/h5-wfx/images/order/peer_hy.png" alt="">
        <span>来自</span>
        <span v-if="peerPayInfo.length > 0">{{peerPayInfo[0].nick_name}}</span>
        <span>的代付订单</span>
      </div>
      <div class="peer-msg-cont">
        <div class="peer-msg-cont-top">
          <p class="mon"><span>距离目标金额</span><span
              v-html="scaleGoodsPriceFn(peerPayData.peer_payment, 'hjmoney')"></span></p>
          <p>
            <section class="progress-box">
            <div class="progress">
              <div class="progress-bar progress-bar-striped active"
                   :style="{width: peerPercent+'%'}"></div>
            </div>
          </section>
          </p>
        </div>
        <div class="peer-msg-cont-main">
          <div>
            <p class="pri"><span v-html="scaleGoodsPriceFn('0.00', 'hjmoney money')"></span></p>
            <p class="pri-text">起始金额</p>
          </div>
          <div>
            <p class="pri"><span v-html="scaleGoodsPriceFn(peerPayData.peer_pay_money, 'hjmoney money')"></span></p>
            <p class="pri-text">已筹金额</p>
          </div>
          <div>
            <p class="pri"><span v-html="scaleGoodsPriceFn(peerPayData.peer_payment, 'hjmoney money')"></span></p>
            <p class="pri-text">目标金额</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 待付人员 -->
    <div class="peer-detail-member" v-if="peerInfos.length > 0">
      <ul>
        <li class="peer-detail-member-item" v-for="item in peerInfos" :key="item.peer_pay_id">
          <div class="avatar"><img :src="item.author" alt=""></div>
          <div class="mem-cont">
            <div class="mem-cont-top">
              <div><span class="text">代付：</span><span class="pri">¥&nbsp;{{item.pay_money}}</span></div>
              <div><span class="time">{{item.pay_time}}</span></div>
            </div>
            <div class="mem-cont-msg" v-if="item.pay_message"><span
                class="text">说：</span><span>{{item.pay_message}}</span></div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 待付商品信息 -->
    <div class="peer-detail-good">
      <div class="peer-detail-good-top" @click="navToStore">
        <img class="store" src="https://img.wifenxiao.com/h5-wfx/images/order/peer_shop.png" alt="">
        <span>{{peerPayData.shop_name}}</span>
        <img class="row" src="https://img.wifenxiao.com/h5-wfx/images/order/peer_row.png" alt="">
      </div>
      <div class="peer-detail-good-item" v-for="(item, index) in peerPayInfo" :key="index">
        <div class="peer-detail-good-item-left">
          <img :src="item.img_src" alt="">
        </div>
        <div class="peer-detail-good-item-right">
          <div class="title">{{item.item_title}}</div>
          <div class="num clearfix"><span class="fl">{{item.sku_name}}</span><span class="fr">x{{item.num}}</span></div>
          <div class="priopt">
            <div class="priopt-price"><span v-html="scaleGoodsPriceFn(item.current_price, 'hjmoney')"></span></div>
            <div class="btn">
              <div class="btn-buy red-gra-btn" @click="navToCollcateDetail(item.item_id)">查看商品</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    
    <div v-if="peerPayInfo[0] && peerPayInfo[0].status > 0">
      <!-- TODO 小程序跳转 -->
      <!-- <a class="peer-detail-btn" :href="peerPayInfo[0].link" > -->
      <a class="peer-detail-btn" @click="jumpPage(peerPayInfo[0].link)" >
        <div class="btn">
          <div class="pay-btn red-gra-btn">我也要</div>
        </div>
      </a>
    </div>
    <div v-else>
      <!-- 待付订单详情 -->
      <div class="peer-detail-order">
        <div class="peer-detail-order-top" @click="navToOrderDetail(peerPayData.order_id)" v-if="showOrder">
          <img class="store" src="https://img.wifenxiao.com/h5-wfx/images/order/peer_order.png" alt="">
          <span>订单详情</span>
          <img class="row" src="https://img.wifenxiao.com/h5-wfx/images/order/peer_row.png" alt="">
        </div>
        <div v-else class="peer-detail-order-top">
          <img class="store" src="https://img.wifenxiao.com/h5-wfx/images/order/peer_order.png" alt="">
          <span>订单详情</span>
        </div>
        <div class="peer-detail-order-address">
          <div class="address-img"><img src="https://img.wifenxiao.com/h5-wfx/images/order/peer_log.png" alt=""></div>
          <div class="address-cont" v-if="peerPayInfo.length > 0">
            <div class="user"><span>{{peerPayInfo[0].receiver_name}}</span><span>{{peerPayInfo[0].receiver_mobile}}</span>
            </div>
            <div class="msg"><span>{{peerPayInfo[0].receiver_address}}</span></div>
          </div>
        </div>
        <div class="peer-detail-order-input">
          <div class="peer-detail-order-input-item">
            <span>代付人</span>
            <input class="ipt" type="text" v-model="userName" placeholder="请输入你的姓名" @blur="scrollZero">
          </div>
          <div class="peer-detail-order-input-item">
            <span>留言</span>
            <input class="ipt" type="text" v-model="userMsg" placeholder="说点什么吧" @blur="scrollZero">
          </div>
          <div class="peer-detail-order-input-item">
            <span>付款金额</span>
            <em>&yen;</em>
            <span class="ipt-num" v-if="showMoney">{{payMoney}}</span>
            <input v-else class="ipt-num fz13" ref="iptmoney" type="text" :placeholder="'最多可代付'+ peerPayData.peer_payment +'元'" v-model="payMoney" @keyup.enter="scrollZero">
            <div class="btn">
              <div class="btn-buy red-border-btn" v-if="!tlInfobz.is_tlfz" @click="editPrice">修改</div>
            </div>
          </div>
        </div>
        <div class="peer-detail-order-pay">
          <div class="item-box" v-if="balance !=0 && is_item_support_balance_pay && is_open_balance_pay==1 && isBalanceShow">
            <van-checkbox class="item-title" @change="handleChangeBalance" v-model="money_type" shape="square" icon-size="14px">
              使用余额
              <i>(余额：<span class="smallsize">{{mSymbol.name}}<b>{{balance}}</b></span>)</i>
              <template #icon="props">
                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
              </template>
            </van-checkbox>
          </div>
        </div>
      </div>
  
      <div class="peer-detail-method" v-if="isShowOtherPayment" :visible.sync="isShowOtherPayment">
        <pay-ment ref="payments"
                  @globalAlipay="globalAlipay"
                  :isPM="!isKuajing"
                  :isKuajing="!isKuajing"
                  :isHdfkPay="false"
                  :isPeerPay="true"
                  :isXxPay="false"
                  :isTlfzPay="true"
                  :tlInfobz = 'tlInfobz'
                  :istl= "istl"
                  @paymentData='paymentData'
                  @input="changePayType"
                  v-model="paymentWay"></pay-ment>
      </div>
  
      <!-- 底部按钮 -->
      <div class="peer-detail-btn">
        <div class="btn" @click="openPayPop" v-if="!showSubmit">
          <div class="pay-btn red-gra-btn">慷慨付款{{reCountPrice}}元</div>
        </div>
      </div>
    </div>

    <!-- 正在支付中 -->
    <div class="paypopnote" v-show="isSubmit"><span>正在提交中……</span></div>

    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
<!--    <div>-->
<!--      <change-card-dialog-->
<!--              ref="changeCard"-->
<!--              :bindCardList="bindCardList"-->
<!--              @getBankType="getBankType"-->
<!--              :isJumpUnionPaymen="false"-->
<!--              :jumpName="'buy'"-->
<!--      ></change-card-dialog>-->
<!--    </div>-->
    <send-code-payment ref="sendCodePayment"  />
  </div>
</template>

<script>
import { isWeixinCient } from '@/utils/validate'
import Vue from 'vue'
import {
  Progress
} from 'vant'
import {
  scaleGoodsPrice
} from '@/utils/index.js'
import {
  openPage
} from '@/utils/utils.js'
import smallpay from '@/smallapp/smallpay'
import {
  getPeerPayDetail,
  getPeerPayBuy
} from '@/api/order/peerPay.js'
import {
  Checkbox,
  CheckboxGroup
} from 'vant'
import { mapGetters } from 'vuex'
Vue.use(Progress)
Vue.use(Checkbox).use(CheckboxGroup)
import payMent from '@/components/Payment'
import small from '@/smallapp/small'
import SmallLogin from '@/components/SmallLogin/smallLogin'
import { getBankCardList } from '@/api/order/order.js'
import sendCodePayment from '../../buy/components/sendCodePayment/index'
export default Vue.extend({
  components: {
    payMent,
    SmallLogin,
    sendCodePayment
  },
  data() {
    return {
      sendData:{},
      orderId: '',
      peerType: '',
      peerPayInfo: [],
      peerPayData: {},
      peerInfos: [],
      isReadonly: true,
      userName: '',
      userMsg: '',
      peerPercent: 0,
      showMoney: true,
      isShowOtherPayment: true,
      eddprice: 0.00,
      money_type: false, //  选用余额
      paymentWay: '',
      showOrder: false,
      isKuajing: false, // 是不是跨境商品
      is_item_support_balance_pay: false,
      is_open_balance_pay: '0', // 是否开启余额支付
      balance: '0.00',
      isSubmit: false,
      showSubmit: false,
      payMentText: '',
      payMoney: '',
      formData: {
        'global_alipay_currency': '',
        'hantepay': '',
        'order_id': '',
        'pay_money': '',
        'pay_type': '',
        'money_type': '',
        'peer_order_no': ''
      },
      activeIcon: 'https://img.wifenxiao.com/h5-wfx/images/check_icon.png',
      inactiveIcon: 'https://img.wifenxiao.com/h5-wfx/images/uncheck__icon.png',
      paymentDataList: {},
      tlInfobz: {
        is_tlfz: 0,
        is_tlfz_deposit: 0,
        is_ye: 0
      },
      istl: false,
      bindCardList: [],
      bindUnionpayBankId: '',
      isBalanceShow: false
    }
  },
  watch: {
    'money_type'(val) {
      if (val) {
        this.formData.money_type = 2
      } else {
        this.formData.money_type = ''
      }
    }
  },
  computed: {
    reCountPrice() {
      const totalPrice = this.payMoney
      // 11、判断是否显示其他支付
      if (this.formData.money_type == '') {
        this.eddprice = totalPrice
        this.isShowOtherPayment = true
      } else if (this.formData.money_type == 2) {
        this.eddprice = Number(totalPrice - this.balance).toFixed(2)
        // console.log(this.eddprice)
        if (this.eddprice > 0) {
          this.isShowOtherPayment = true
        } else {
          this.isShowOtherPayment = false
        }
      }
      this.formData.pay_money = Number(totalPrice).toFixed(2)
      return Number(totalPrice).toFixed(2)
    },
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  },
  methods: {
    // 获取银行卡ID
    getBankType(bankId) {
      if (bankId) {
        this.bindUnionpayBankId = bankId
      }
    },
    /* 呀团分期支付 start 默认不采用分期  3 6 12  */
    changePayType(value, stages) {
      // console.log('value', value)
      if (value === 'ylpay' && this.ytfqDz) {
        this.isShowByStages = true
        this.formData.union_by_stages = stages // 默认值传过去
      } else if (value == 'tlfzYlpay') {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        getBankCardList().then(res => {
          this.$loadingWrap.close()
          if (res.status === 1 && res.data.bindCardList.length) {
            this.bindCardList = res.data.bindCardList
            this.bindUnionpayBankId = res.data.bindCardList[0] ? res.data.bindCardList[0].id : ''
            this.$refs.changeCard.show()
          } else {
            this.bindCardList = []
          }
        })
      } else {
        delete this.formData.union_by_stages
        this.isShowByStages = false
      }
    },
    // 余额支付切换 小程序滚动到底部
    handleChangeBalance() {
        if (!this.money_type) {
          document.querySelector('.peer-detail').$$getBoundingClientRect().then(res =>{
            wx.pageScrollTo({
              scrollTop: res.height
            })
          })
        }
    },
    init() {
        // TODO 小程序获取参数
        window.addEventListener('wxload', query => {
            // console.log(query, '分享参数')
            const $query = this.$route.query
            this.sendData = {}
            this.sendData.id = query.id ? query.id : $query.id
            this.orderId = this.sendData.id
            this.sendData.peer_type = query.peer_type ? query.peer_type : $query.peer_type
            this.peerType = this.sendData.peer_type
            this.getPeerPayDetailFun(this.sendData)
            small.HandleShareParams()
        })
      
    },

    jumpPage(link) {
      openPage(link)
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    /**
       * 查看商品
       */
    navToCollcateDetail(id) {
      this.$JumpName(this, 'item-detail', {
        detailId: id
      })
    },

    editPrice() {
      this.showMoney = false
      setTimeout(() => {
        this.$refs.iptmoney.focus()
      }, 600)
      this.payMoney = ''
    },

    navToOrderDetail(oid) {
      this.$JumpName(this, 'order-detail', {
        id: oid
      })
    },

    navToStore() {
      // TODO 小程序跳转处理
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
        wx.redirectTo({
          url: `/pages/shopIndex/index?type=jump&targeturl=${encodeURIComponent('/index')}`
        })
    },

    // 选中国际支付宝抛出的值
    globalAlipay(val) {
      this.formData.global_alipay_currency = val
    },

    scrollZero() {
      window.scroll(0, 0)
    },
    //  通联
    paymentData(data) {
      this.paymentDataList = data
      // console.log('----')
      // console.log(data)
      // console.log('----')
    },

    openPayPop() {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
      if (this.paymentWay == 'wxpay') {
        if (isWeixinCient()) { // 微信环境
          this.formData.pay_type = 2
        } else { // 非微信环境
          this.formData.pay_type = 12
        }
        this.payMentText = '微信支付'
      } else if (this.paymentWay == 'alipay') {
        this.formData.pay_type = 1
        this.payMentText = '支付宝支付'
      } else if (this.paymentWay == 'Hdfkpay') {
        this.formData.pay_type = 3
        this.payMentText = '货到付款'
      } else if (this.paymentWay == 'jdpay') {
        this.formData.pay_type = 4
        this.payMentText = '京东支付'
      } else if (this.paymentWay == 'PayPalpay') {
        this.formData.pay_type = 5
        this.payMentText = 'PayPal支付'
      } else if (this.paymentWay == 'BeiBaopay') {
        this.formData.pay_type = 6
        this.payMentText = '贝宝支付'
      } else if (this.paymentWay == 'peerpay') {
        this.formData.pay_type = 7
        this.payMentText = '找人代付'
      } else if (this.paymentWay == 'ylpay') {
        this.formData.pay_type = 8
        this.payMentText = '银联支付'
      } else if (this.paymentWay == 'kqpay') {
        this.formData.pay_type = 9
        this.payMentText = '快钱支付'
      } else if (this.paymentWay == 'xxpay') {
        this.formData.pay_type = 10
        this.payMentText = '线下支付'
      } else if (this.paymentWay == 'yeepay') {
        this.formData.pay_type = 11
        this.payMentText = '易宝支付'
      } else if (this.paymentWay == 'newyeepay') {
        this.formData.newyeepay = 1
        this.formData.pay_type = 14
        this.payMentText = '新易宝支付'
      } else if (this.paymentWay == 'cloudPay') { // 定制云闪付
        this.formData.pay_type = 17
        this.payMentText = '云闪付'
      } else if (this.paymentWay == 'globalAlipay') { // 国际支付宝
        this.formData.pay_type = 15
        this.formData.global_alipay_currency = this.global_alipay_currency
        this.payMentText = '国际支付宝支付'
      } else if (this.paymentWay == 'htwxpay') { // 定制 hante
        this.formData.pay_type = 16
        this.formData.hantepay = 1
        this.payMentText = '微信支付'
      } else if (this.paymentWay == 'htAlipay') { // 定制 hante
        this.formData.pay_type = 16
        this.formData.hantepay = 2
        this.payMentText = '支付宝支付'
      } else if (this.paymentWay == 'tlwxpay') { // 通联支付
        this.formData.pay_type = 19
        this.formData.allinpay = 1
        this.payMentText = '微信支付'
      } else if (this.paymentWay == 'tlAlipay') { // 通联支付
        this.formData.pay_type = 19
        this.formData.allinpay = 2
        this.payMentText = '支付宝支付'
      } else if (this.paymentWay == 'goallpay') { // GoAllPay
        this.formData.pay_type = 20
        this.payMentText = 'GoAllPay'
      } else if (this.paymentWay == 'Alipay') {
        this.formData.pay_type = 21
        this.payMentText = '支付宝'
      } else if (this.paymentWay == 'UnionPay') {
        this.formData.pay_type = 22
        this.payMentText = '银联'
      } else if (this.paymentWay == 'WeChatPay') {
        this.formData.pay_type = 23
        this.payMentText = '微信支付'
      } else if (this.paymentWay == 'tlfzWxpay') {
        this.formData.pay_type = 26
        this.formData.tlfz_pay_type = 1
        this.payMentText = '微信支付'
      } else if (this.paymentWay == 'tlfzAlipay') {
        this.formData.pay_type = 26
        this.formData.tlfz_pay_type = 2
        this.payMentText = '支付宝支付'
      } else if (this.paymentWay == 'tlfzYlpay') {
        this.formData.pay_type = 26
        this.formData.tlfz_pay_type = 3
        this.payMentText = '银联支付'
      }
      // if (Number(this.formData.pay_type > 0)) {
      //   this.money_type = false
      // }
      this.clickPayInfoUser()
    },

    // 提交代付人相关信息
    clickPayInfoUser() {
      const sendData = {}
      // TODO 小程序参数判断
      sendData.id = this.orderId
      sendData.peer_message = this.userMsg
      sendData.peer_type = this.peerType
      sendData.pay_name = this.userName
      this.showSubmit = true
      getPeerPayDetail(sendData).then(res => {
        if (res.status === 1) {
          this.formData.order_id = res.data.info[0].order_id
          this.formData.pay_money = this.payMoney
          this.formData.peer_order_no = res.data.info[0].order_no
          if (this.showSubmit) {
            this.clickSubmitOrder()
          }

        } else {
          this.showSubmit = false
          this.$Error(res.msg)
        }
      })
    },

    // 提交订单
    clickSubmitOrder() {
      // if (this.formData.tlfz_pay_type == 3 && !this.bindCardList.length) {
      //   this.$JumpName(this, 'bindBankCard')
      //   this.isSubmit = false
      //   return
      // }
      // if (!this.bindUnionpayBankId && this.formData.tlfz_pay_type == 3) {
      //   this.$Error('请选择支付银行卡')
      //   this.isSubmit = false
      //   return
      // }
      if (this.paymentDataList.tlfz_deposit == 1 && this.money_type && this.paymentDataList.is_need_change_bind_phone) {
        this.$refs.tlInfo.handleShow({
          ishow: true
        })
        // console.log(this.paymentDataList)
        this.isSubmit = false
        this.showSubmit = false
        return false
      }
      this.formData.bindUnionpayBankId = this.bindUnionpayBankId
      this.isSubmit = true
      getPeerPayBuy(this.formData).then(res => {
        this.isSubmit = false
        if (res.status == 1) {
          // this.$Error(res.msg)
          setTimeout(() => {
            // TODO 小程序跳转处理
              if (res.data) {
                if (this.paymentWay == 'wxpay' && res.data.jsApiParameters) {
                  // TODO 小程序微信支付处理
                  smallpay.wxOrderPay(res.data.jsApiParameters)
                }  else if (this.formData.pay_type == 26 && this.money_type) {
                  this.$refs.sendCodePayment.handleShow({
                    order_id: res.data.order_id,
                    tlfz_pay_type: 4,
                    peer_pay_id: res.data.peer_pay_id,
                    pay_type: 4
                  })
                }else {
                  this.getPeerPayDetailFun(this.sendData)
                  // window.location.href = '/order-lists?type=1'
                }
              } else {
                this.getPeerPayDetailFun(this.sendData)
                // window.location.href = '/order-lists?type=1'
              }
            
          }, 1000)
        } else {
          this.showSubmit = false
          this.$Error(res.msg)
        }
      })
    },

    /**
       * 获取详情
       */
    getPeerPayDetailFun(sendData) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getPeerPayDetail(sendData).then(res => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          this.peerPayInfo = res.data.info
          this.peerPayData = res.data
          this.peerInfos = res.data.peer_infos
          this.payMoney = res.data.peer_payment
          this.peerPercent = res.data.peer_percent
          this.pay_money = res.data.pay_money
          this.balance = res.data.user_balance
          this.is_item_support_balance_pay = res.data.is_item_support_balance_pay
          this.is_open_balance_pay = res.data.is_open_balance_pay

          // 默认勾选余额支付
          if (this.is_item_support_balance_pay && this.is_open_balance_pay == 1 && this.balance != 0 && this.balance > this.payMoney) {
            this.money_type = true
            this.isBalanceShow = true
          } else {
            if (res.data.is_tlfz) {
              this.isBalanceShow = false
            }
          }
          if (res.data.user_id == res.data.info[0].user_id) {
            this.showOrder = true
          } else {
            this.showOrder = false
          }
          this.tlInfobz.is_tlfz = res.data.is_tlfz
          this.tlInfobz.is_tlfz_deposit = res.data.is_tlfz_deposit
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    this.init()
  },
  mounted() {
      window.addEventListener('wxshow', () => {
        if (!small.checkLogin()) {
          this.isShowOtherPayment = false
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })

      window.$$subscribe('loginReload', reload => {
          if (reload) {
            this.isShowOtherPayment = true
            this.getPeerPayDetailFun(this.sendData)
            small.HandleShareParams()
            this.init()
          }
      })
  },
  beforeDestroy() {
    window.$$unsubscribe('loginReload')
  }
})
</script>

<style lang="scss">
  // TODO 底部copyright样式处理
  .miniprogram-root {
    .public-bottom {
      padding-bottom: 100px!important;
    }
    .van-checkbox__icon {
      width: 28px;
      height: 28px;
      .van-icon {
        width: 28rpx;
        height: 28rpx;
        font-size: 28rpx;
      }
    }

  }

  .money {
    color: #333 !important;
  }

  .peer-detail-order-pay{
    .van-checkbox__icon--checked .van-icon{
      background: url(https://img.wifenxiao.com/h5-wfx/images/check_icon.png) center/cover no-repeat;
      border-color: transparent;
    }
    .van-checkbox__icon .van-icon{
      width: 28px;
      height: 28px;
      visibility: hidden;
    }
    .van-checkbox{
      position: relative;
      .img-icon{
        width: 28px;
        height: 28px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
</style>

<style lang="scss">
  @import 'src/styles/variables.scss';
  @import 'src/styles/mixin';

  .peer-detail {
    width: 100%;
    padding: 25px 25px 125px;
    box-sizing: border-box;

    &-top {
      background: #fff;
      border-radius: 20px;
      padding: 25px;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 20px;

      img {
        width: 80px;
        height: 80px;
        vertical-align: -30px;
        margin-right: 20px;
        border-radius: 10px;
      }

      span {
        color: #F21328;
        font-size: 27px;
        font-weight: 500;
      }
    }

    &-money {
      background: #fff;
      width: 100%;
      padding: 30px 25px;
      box-sizing: border-box;
      border-radius: 20px;

      .peer-msg-top {
        padding-bottom: 30px;
        border-bottom: 1px solid #EDEDED;

        img {
          width: 30px;
          height: 27px;
          margin-right: 10px;
          vertical-align: -6px;
        }

        span {
          color: #656565;
          font-size: 26px;
          font-weight: 500;

          &:nth-child(3) {
            color: #333;
            font-weight: bold;
            margin: 0 5px;
          }
        }
      }

      .peer-msg-cont {
        width: 100%;
        padding: 30px 0;

        &-top {
          .mon {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            font-size: 28px;
            font-weight: 500;
            padding-bottom: 50px;
          }
        }

        &-main {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-around;
          padding-top: 50px;

          &>div {
            text-align: center;

            .pri {
              margin-bottom: 17px;
            }

            .pri-text {
              color: #999;
              font-size: 24px;
            }
          }
        }
      }
    }

    &-member {
      background: #fff;
      width: 100%;
      padding: 25px;
      box-sizing: border-box;
      border-radius: 20px;
      margin-top: 20px;

      &-item {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        border-bottom: 1px solid #EDEDED;
        padding-top: 25px;
        padding-bottom: 25px;

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          border-bottom: 0;
          padding-bottom: 0;
        }

        .avatar {
          width: 86px;
          height: 86px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 15px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .mem-cont {
          width: calc(100% - 105px);

          .text {
            color: #656565;
            font-size: 28px;
          }

          &-top {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            margin-bottom: 20px;

            .pri {
              &:nth-child(2) {
                color: #F30B23;
                font-size: 26px;
              }
            }

            .time {
              font-size: 22px;
              color: #999999;
            }
          }

          &-msg {
            font-size: 28px;
          }
        }
      }
    }

    &-good {
      background: #fff;
      width: 100%;
      padding: 25px;
      box-sizing: border-box;
      border-radius: 20px;
      margin-top: 20px;

      &-top {
        width: 100%;
        position: relative;
        padding-bottom: 25px;
        border-bottom: 1px solid #EDEDED;
        margin-bottom: 25px;

        span {
          color: #656565;
          font-size: 26px;
        }

        .store {
          width: 30px;
          height: 30px;
          vertical-align: -6px;
          margin-right: 10px;
        }

        .row {
          position: absolute;
          top: 10px;
          right: 0;
          width: 9px;
          height: 16px;
        }
      }

      &-item {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 20px;
        &:last-child{
          margin-bottom: 0;
        }

        &-left {
          width: 186px;
          height: 186px;
          border-radius: 10px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }

        &-right {
          flex: 1;
          color: #333;
          margin-left: 20px;
          position: relative;
          width: 69%;

          .title {
            // font-weight: bold;
            margin-bottom: 18px;
            @include lineClamp(24px, 1.4, 2);
          }

          .num {
            width: 100%;
            text-align: right;
            position: absolute;
            left: 0;
            bottom: 75px;
            font-size: 24px;
            span {
              &:first-child{
                color: #999;
              }
              &:last-child {
                font-weight: bold;
              }
            }
          }

          .priopt {
            position: absolute;
            bottom: 0;
            width: 100%;

            &-price {
              color: #F20B22;
              margin: 0 4px;
            }
          }

          .btn {
            position: absolute;
            top: 20%;
            right: 0px;
            transform: translate(0, -50%);

            &-buy {
              color: #fff;
              line-height: 24px;
              font-size: 20px;
              font-weight: 500;
              padding: 12px 21px;
              border-radius: 26px;
            }
          }
        }
      }
    }

    &-order {
      background: #fff;
      width: 100%;
      padding: 25px;
      box-sizing: border-box;
      border-radius: 20px;
      margin-top: 20px;

      &-top {
        width: 100%;
        position: relative;
        padding-bottom: 25px;
        border-bottom: 1px solid #EDEDED;
        margin-bottom: 25px;

        span {
          color: #656565;
          font-size: 26px;
        }

        .store {
          width: 30px;
          height: 30px;
          vertical-align: -6px;
          margin-right: 10px;
        }

        .row {
          position: absolute;
          top: 10px;
          right: 0;
          width: 9px;
          height: 16px;
        }
      }

      &-address {
        position: relative;

        .address-img {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(0, -50%);
          width: 31px;
          height: 38px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .address-cont {
          padding-left: 55px;
          padding-bottom: 25px;
          border-bottom: 1px solid #EDEDED;

          .user {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 23px;

            span {
              &:nth-child(1) {
                margin-right: 30px;
              }
            }
          }

          .msg {
            color: #999;
            font-size: 26px;
            font-weight: 500;
          }
        }
      }

      &-input {
        // padding-bottom: 25px;
        border-bottom: 1px solid #EDEDED;

        &-item {
          padding: 30px 0;
          position: relative;
          display: flex;
          align-items: center;
          span {
            display: inline-block;
            min-width: 105px;
            font-size: 26px;
            font-weight: 500;
            color: #333;
            margin-right: 30px;
          }

          .ipt {
            width: calc(100% - 150px);
          }

          em {
            font-size: 24px;
            color: #F30B23;
          }

          .ipt-num {
            font-size: 40px;
            width: calc(100% - 200px);
            color: #F30B23;
            height: 40px;
            line-height: 40px;
            margin-left: 6px;
            &.fz13 {
              font-size: 26px;
            }
          }

          input::-webkit-input-placeholder {
            color: #999999;
            font-size: 24px;
            vertical-align: bottom;
          }

          .btn {
            position: absolute;
            top: 50%;
            right: 0px;
            transform: translate(0, -50%);

            &-buy {
              color: #F30B23;
              line-height: 24px;
              font-size: 22px;
              font-weight: 500;
              padding: 7px 16px;
              border-radius: 26px;
            }
          }
        }
      }

      &-pay {
        padding-top: 25px;
        font-size: 26px;
        line-height: 40px;
      }
    }

    &-method {
      background: #fff;
      width: 100%;
      padding: 25px;
      box-sizing: border-box;
      border-radius: 20px;
      margin-top: 20px;
    }

    &-btn {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      padding: 11px 25px;
      z-index: 999;
      .btn {
        height: 76px;
        line-height: 76px;
        color: #fff;
        font-size: 28px;
        text-align: center;

        .pay-btn {
          border-radius: 38px;
        }
      }
    }
    .paypopnote {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(0,0,0,.7);
      text-align: center;
      color: #fff;
      font-size: 32px;
      position: fixed;
      z-index: 99998;
      span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    }
    // TODO 小程序增加进度条
    .progress-box {
      width: 654px;
      position: relative;
      height: 12px;
      .progress {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 12px;
        border-radius: 12px;
        overflow: hidden;
        background: #f3f3f3;
      }
      .progress-bar {
        position: absolute;
        left: 0;
        top: 0;
        height: 12px;
        background: #F30C24;
      }
    }
  }

</style>
